<template>
  <!-- 系统提示信息 -->
  <div class="system-tip" style="width: 100%; background-color: #0a9fe5; color: white; padding: 10px;">
    系统最多支持查询 365 天的历史订单数据，数据仅展示交易结束订单。
  </div>
  <!-- 搜索表单区域 -->
  <div class="search-form-wrapper">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <!-- 订单编号输入框 -->
      <el-form-item label="订单编号">
        <el-input v-model="searchForm.orderId" placeholder="请输入编号" clearable class="input-style" />
      </el-form-item>
      <!-- 客户电话输入框 -->
      <el-form-item label="客户电话">
        <el-input v-model="searchForm.serviceStaffPhone" placeholder="请输入服务人员电话" clearable class="input-style" />
      </el-form-item>
      <!-- 订单状态下拉选择框 -->
      <el-form-item label="订单状态">
        <el-select
          v-model="searchForm.orderStatus"
          placeholder="请选择订单状态"
          clearable
          style="width: 150px"
          class="select-style"
        >
          <el-option
            v-for="item in orderStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- 支付状态下拉选择框 -->
      <el-form-item label="支付状态">
        <el-select
          v-model="searchForm.payStatus"
          placeholder="请选择支付状态"
          clearable
          style="width: 150px"
          class="select-style"
        >
          <el-option
            v-for="item in payStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- 退款状态下拉选择框 -->
      <el-form-item label="退款状态">
        <el-select
          v-model="searchForm.refundStatus"
          placeholder="请选择退款状态"
          clearable
          style="width: 150px"
          class="select-style"
        >
          <el-option
            v-for="item in refundStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- 重置和查询按钮 -->
      <el-form-item>
        <el-button type="default" @click="resetForm" class="reset-button">重置</el-button>
        <el-button type="primary" @click="searchOrders" class="search-button">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- 订单列表区域 -->
  <div class="order-list-wrapper">
    <el-table :data="orderTableData" style="width: 100%" class="order-table">
      <!-- 订单编号列 -->
      <el-table-column align="center" prop="id" label="订单编号" width="170px" />
      <!-- 服务名称列 -->
      <el-table-column align="center" prop="name" label="服务名称" />
      <!-- 下单时间列 -->
      <el-table-column align="center" prop="placeOrderTime" label="下单时间" width="250px" />
      <!-- 服务地址列 -->
      <el-table-column align="center" prop="serveAddress" label="服务地址" width="250px" />
      <!-- 订单状态列 -->
      <el-table-column align="center" prop="ordersStatus" label="订单状态">
        <template #default="scope">
          <span v-if="scope.row.ordersStatus === null">-</span>
          <el-button
            v-else
            class="custom-order-status-button"
            type="primary"
          >
            <span v-if="scope.row.ordersStatus === 0">待支付</span>
            <span v-else-if="scope.row.ordersStatus === 100">派单中</span>
            <span v-else-if="scope.row.ordersStatus === 200">待服务</span>
            <span v-else-if="scope.row.ordersStatus === 300">服务中</span>
            <span v-else-if="scope.row.ordersStatus === 500">订单完成</span>
            <span v-else-if="scope.row.ordersStatus === 600">已取消</span>
            <span v-else-if="scope.row.ordersStatus === 700">已关闭</span>
          </el-button>
        </template>
      </el-table-column>
      <!-- 交易结束时间列 -->
      <el-table-column align="center" prop="serveEndTime" label="交易结束时间" width="250px">
        <template #default="scope">
          <span v-if="scope.row.serveEndTime === null">-</span>
          <span v-else>{{ scope.row.serveEndTime }}</span>
        </template>
      </el-table-column>
      <!-- 服务人姓名列 -->
      <el-table-column align="center" prop="serveProviderStaffName" label="服务人姓名">
        <template #default="scope">
          <span v-if="scope.row.serveProviderStaffName === null">-</span>
          <span v-else>{{ scope.row.serveProviderStaffName }}</span>
        </template>
      </el-table-column>
      <!-- 服务人电话列 -->
      <el-table-column align="center" prop="serveProviderStaffPhone" label="服务人电话">
        <template #default="scope">
          <span v-if="scope.row.serveProviderStaffPhone === null">-</span>
          <span v-else>{{ scope.row.serveProviderStaffPhone }}</span>
        </template>
      </el-table-column>
      <!-- 订单金额列 -->
      <el-table-column align="center" prop="totalAmount" label="订单金额" />
      <!-- 实付金额列 -->
      <el-table-column align="center" prop="realPayAmount" label="实付金额" />
      <!-- 支付状态列 -->
      <el-table-column align="center" prop="payStatus" label="支付状态">
        <template #default="scope">
          <span v-if="scope.row.payStatus === null">-</span>
          <el-button
            v-else
            class="custom-order-status-button"
            type="primary"
          >
            <span v-if="scope.row.payStatus === 2">待支付</span>
            <span v-else-if="scope.row.payStatus === 4">支付成功</span>
          </el-button>
        </template>
      </el-table-column>
      <!-- 退款状态列 -->
      <el-table-column align="center" prop="refundStatus" label="退款状态">
        <template #default="scope">
          <span v-if="scope.row.refundStatus === null">-</span>
          <el-button
            v-else
            class="custom-order-status-button"
            type="primary"
          >
            <span v-if="scope.row.refundStatus === 1">退款中</span>
            <span v-else-if="scope.row.refundStatus === 2">退款成功</span>
            <span v-else-if="scope.row.refundStatus === 3">退款失败</span>
          </el-button>
        </template>
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column align="center" prop="address" label="操作">
        <template #default="scope">
          <router-link :to="{path:'/order/historyOrderDetail',query:{id:scope.row.id}}">查看</router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="searchForm.pageNum"
      v-model:page-size="searchForm.pageSize"
      :page-sizes="[1, 20, 30, 40]"
      :size="paginationSize"
      :disabled="paginationDisabled"
      :background="paginationBackground"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalOrders"
      @size-change="handlePageSizeChange"
      @current-change="handlePageCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { findAll } from "@/api/order/historyOrders";

// 订单列表数据
const orderTableData = ref([]);
// 搜索表单数据
const searchForm = ref({
  pageNum: 1,
  pageSize: 10,
  orderId: null,
  serviceStaffPhone: null,
  orderStatus: null,
  payStatus: null,
  refundStatus: null,
});
// 总订单数
const totalOrders = ref(0);
// 分页相关配置
const paginationSize = ref('');
const paginationDisabled = ref(false);
const paginationBackground = ref(true);

// 查询订单列表数据
const searchOrders = () => {
  findAll(searchForm.value).then((res) => {
    orderTableData.value = res.data.data.records;
    totalOrders.value = res.data.data.total;
  });
};
// 初始化查询订单列表数据
searchOrders();

// 处理分页每页数量变化
const handlePageSizeChange = (newPageSize) => {
  searchForm.value.pageSize = newPageSize;
  searchOrders();
};

// 处理分页当前页变化
const handlePageCurrentChange = (newPageNum) => {
  searchForm.value.pageNum = newPageNum;
  searchOrders();
};

// 订单状态选项配置
const orderStatusOptions = [
  { value: '0', label: '待支付' },
  { value: '100', label: '派单中' },
  { value: '200', label: '待服务' },
  { value: '300', label: '服务中' },
  { value: '500', label: '订单完成' },
  { value: '600', label: '已取消' },
  { value: '700', label: '已关闭' },
];

// 支付状态选项配置
const payStatusOptions = [
  { value: '2', label: '待支付' },
  { value: '4', label: '支付成功' },
];

// 退款状态选项配置
const refundStatusOptions = [
  { value: '1', label: '退款中' },
  { value: '2', label: '退款成功' },
  { value: '3', label: '退款失败' },
];

// 重置搜索表单
const resetForm = () => {
  searchForm.value.pageNum = 1;
  searchForm.value.pageSize = 10;
  searchForm.value.orderId = '';
  searchForm.value.serviceStaffPhone = '';
  searchForm.value.orderStatus = '';
  searchForm.value.payStatus = '';
  searchForm.value.refundStatus = '';
  searchOrders();
};
</script>

<style scoped>
/* 系统提示信息样式 */
.system-tip {
  font-size: 16px;
  text-align: center;
}
/* 输入框样式 */
.input-style {
  height: 32px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 10px;
}
/* 下拉选择框样式 */
.select-style {
  height: 32px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
/* 重置按钮样式 */
.reset-button {
  margin-right: 10px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f5f5f5;
  color: #333;
  padding: 0 15px;
}
/* 查询按钮样式 */
.search-button {
  height: 32px;
  line-height: 32px;
  border: 1px solid #0a9fe5;
  border-radius: 4px;
  background-color: #0a9fe5;
  color: white;
  padding: 0 15px;
}
/* 订单表格样式 */
.order-table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  width: 100%;
}
.order-table th,
.order-table td {
  border: 1px solid #ccc;
  padding: 8px 10px;
  text-align: center;
}
.order-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}
/* 自定义订单状态按钮样式 */
.custom-order-status-button {
  padding: 5px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  color: #333;
  border-radius: 4px;
}
/* 分页样式 */
.pagination-style {
  margin-top: 10px;
  text-align: right;
}
.pagination-style.el-pagination {
  display: inline-block;
}
</style>
